import { FC, useState, useRef, useEffect } from 'react';

export const JustTestAnShunLi: FC = () => {
  //   useEffect(() => {
  //     console.log(useEffect);
  //     return () => {};
  //   }, []);
  //   console.log(1);
  //   const [test1, setTest1] = useState<number>(0);
  //   console.log(test1);
  //   if (test1 === 0) {
  //     setTest1(2);
  //   }
  //   console.log(test1);
  //   setTimeout(() => {
  //     console.log(test1);
  //   }, 200);
  //   return <div>asdf</div>;
  const [count, setCount] = useState<number>(0);
  const ref = useRef(false);
  const couterRef = useRef<any>();
  console.log(couterRef.current);
  console.log('------refOut-------', ref.current);
  useEffect(() => {
    console.log(couterRef.current);
    console.log('----refEffect-----', ref.current);
    if (ref.current) {
      console.log('------我执行了ref------');
    } else {
      ref.current = true;
      console.log('-----ref.currentChange--------', ref.current);
      if (ref.current) {
        console.log('------refIn-------', ref.current);
      }
    }
    /**输出如下：
     * ------refOut------- false
       ----refEffect----- false
       -----ref.currentChange-------- true
       ------refIn------- true
       --------我点击了按钮-----
       ------refOut------- true
       ----refEffect----- true
       ------我执行了ref------
     */
    console.log('useEffect执行完毕');
  }, []);
  return (
    <>
      <div>`The value is ${count}, The double value is `;</div>
      <button
        ref={couterRef}
        onClick={() => {
          console.log('--------我点击了按钮-----');
          setCount(count + 1);
        }}
      >
        按钮
      </button>
    </>
  );
};
